import React, { useRef } from 'react';

class TestCpn extends React.Component {
    render() {
        return <h2>TestCpn</h2>
    }
}

// function TestCpn2(props) {
//     return <h2>TestCpn2</h2>
// }

export default function RefHookDemo01() {
    const titleRef = useRef();
    const inputRef = useRef();
    const testRef = useRef();

    function changeDOM() {
        titleRef.current.innerHTML = 'hello';
        inputRef.current.focus();
        // 打印的是类组件对应的实例 函数组件这样会报错 函数组件没有实例
        console.log(testRef.current);
    }

    return (
        <div>
            <h2 ref={titleRef}>RefHookDemo01</h2>
            <input ref={inputRef} type="text" />

            <TestCpn ref={testRef} />

            <button onClick={e => changeDOM()}>修改DOM</button>
        </div>
    )
} 